import "./index.scss";
import { useRef, useEffect, useState } from "react";
import { BellOutlined, SearchOutlined } from "@ant-design/icons";
import type { InputRef } from "antd";
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
import { DatePicker, Button, Input, Space, Table, PaginationProps } from "antd";
import type { ColumnsType, ColumnType } from "antd/es/table";
import type { FilterConfirmProps } from "antd/es/table/interface";
import Highlighter from "react-highlight-words";
import { type } from "os";

interface DataType {
  key: React.Key;
  time: string;
  name: number;
  login: string;
  type: string;
}
type DataIndex = keyof DataType;
type TablePaginationPosition =
  | "topLeft"
  | "topCenter"
  | "topRight"
  | "bottomLeft"
  | "bottomCenter"
  | "bottomRight";

const data: DataType[] = [
  {
    key: "1",
    name: 1,
    time: "admin",
    login: "2023-2-28 19:22:00",
    type: "管理员",
  },
  {
    key: "2",
    name: 2,
    time: "测试人员2",
    login: "2023-2-22 14:32:10",
    type: "普通用户",
  },
  {
    key: "3",
    name: 3,
    time: "测试人员3",
    login: "2023-2-28 16:12:43",
    type: "普通用户",
  },
  {
    key: "4",
    name: 4,
    time: "测试人员4",
    login: "2023-2-25 13:28:09",
    type: "普通用户",
  },
  {
    key: "5",
    name: 5,
    time: "测试人员5",
    login: "2023-2-27 09:28:09",
    type: "普通用户",
  },
  {
    key: "6",
    name: 6,
    time: "测试人员6",
    login: "2023-2-26 10:28:09",
    type: "普通用户",
  },
  {
    key: "7",
    name: 7,
    time: "测试人员7",
    login: "2023-2-26 15:28:09",
    type: "普通用户",
  },
  
];

const Main: React.FC = () => {
  dayjs.locale("zh-cn");

  const [searchText, setSearchText] = useState("");
  const [searchedColumn, setSearchedColumn] = useState("");
  const searchInput = useRef<InputRef>(null);
  const [bottomCenter] = useState<TablePaginationPosition>("bottomCenter");
  const pagination = {
    defaultPageSize: 6,
    defaultCurrent: 1,
    total: data.length,
    showQuickJumper: true,
    showSizeChanger: true,
    pageSizeOptions: [5, 7],
    position: [bottomCenter],
    showTotal: (total: any) => `共${total}条记录 `,
  };

  const handleSearch = (
    selectedKeys: string[],
    confirm: (param?: FilterConfirmProps) => void,
    dataIndex: DataIndex
  ) => {
    confirm();
    setSearchText(selectedKeys[0]);
    setSearchedColumn(dataIndex);
  };

  const handleReset = (clearFilters: () => void) => {
    clearFilters();
    setSearchText("");
  };

  const getColumnSearchProps = (
    dataIndex: DataIndex
  ): ColumnType<DataType> => ({
    filterDropdown: ({
      setSelectedKeys,
      selectedKeys,
      confirm,
      clearFilters,
      close,
    }) => (
      <div style={{ padding: 8 }} onKeyDown={(e) => e.stopPropagation()}>
        <Input
          ref={searchInput}
          placeholder={`Search ${dataIndex}`}
          value={selectedKeys[0]}
          onChange={(e) =>
            setSelectedKeys(e.target.value ? [e.target.value] : [])
          }
          onPressEnter={() =>
            handleSearch(selectedKeys as string[], confirm, dataIndex)
          }
          style={{ marginBottom: 8, display: "block" }}
        />
        <Space>
          <Button
            type="primary"
            onClick={() =>
              handleSearch(selectedKeys as string[], confirm, dataIndex)
            }
            icon={<SearchOutlined />}
            size="small"
            style={{ width: 90 }}
          >
            Search
          </Button>
          <Button
            onClick={() => clearFilters && handleReset(clearFilters)}
            size="small"
            style={{ width: 90 }}
          >
            Reset
          </Button>
          <Button
            type="link"
            size="small"
            onClick={() => {
              confirm({ closeDropdown: false });
              setSearchText((selectedKeys as string[])[0]);
              setSearchedColumn(dataIndex);
            }}
          >
            Filter
          </Button>
          <Button
            type="link"
            size="small"
            onClick={() => {
              close();
            }}
          >
            close
          </Button>
        </Space>
      </div>
    ),

    filterIcon: (filtered: boolean) => (
      <SearchOutlined style={{ color: filtered ? "#1890ff" : undefined }} />
    ),
    onFilter: (value, record) =>
      record[dataIndex]
        .toString()
        .toLowerCase()
        .includes((value as string).toLowerCase()),
    onFilterDropdownOpenChange: (visible) => {
      if (visible) {
        setTimeout(() => searchInput.current?.select(), 100);
      }
    },
    render: (text) =>
      searchedColumn === dataIndex ? (
        <Highlighter
          highlightStyle={{ backgroundColor: "#ffc069", padding: 0 }}
          searchWords={[searchText]}
          autoEscape
          textToHighlight={text ? text.toString() : ""}
        />
      ) : (
        text
      ),
  });

  const columns: ColumnsType<DataType> = [
    {
      title: "用户编号",
      dataIndex: "name",
      key: "1",
      sorter: (a, b) => a.name - b.name,
      width: "10%",
    },
    {
      title: "用户名",
      dataIndex: "time",
      key: "2",
      width: "20%",
      ...getColumnSearchProps("time"),
    },
    {
      title: "上次登录时间",
      dataIndex: "login",
      key: "2",
      width: "20%",
      ...getColumnSearchProps("time"),
    },
    {
      title: "用户类型",
      dataIndex: "type",
      key: "2",
      width: "20%",
      ...getColumnSearchProps("time"),
    },
    {
      title: "操作",
      dataIndex: "strong",
      key: "5",
      render: (_, record) => (
        <Space size="middle">
          <Button style={{ background: "#13ce66", color: "#eee" }}>详情</Button>
          <Button>删除</Button>
        </Space>
      ),
    },
  ];

  return (
    <div className="home">
      <div className="top">
        <div className="top-item">
          <div className="top-item-right">
            <span>用户管理</span>
          </div>
          <div className="top-item-left">
            <BellOutlined style={{ color: "#fff", fontSize: "16px" }} />
          </div>
        </div>
      </div>
      <div className="head">
        <span style={{ width: "6%", margin: "0 10px" }}>用户姓名：</span>
        <Input.Search allowClear style={{ width: "14%" }} defaultValue="" />
        <span style={{ width: "6%", margin: "0 10px" }}>登录时间：</span>
        <DatePicker.RangePicker style={{ width: "30%" }} />
      </div>
      <div className="body">
        <Table columns={columns} dataSource={data} pagination={pagination} />
      </div>
    </div>
  );
};

export default Main;
